オブジェクト指向UIデザイン　使いやすいソフトウェアの原理

https://images-na.ssl-images-amazon.com/images/I/41ncKIL-yRL._SX350_BO1,204,203,200_.jpg

2020/6/15

2020/10/10

ソシオメディア株式会社、上野学、藤井幸多『オブジェクト指向UIデザイン　使いやすいソフトウェアの原理』（技術評論社）読了。オブジェクト指向にもとづく画面設計の手法がふわっとしたアイデア集ではなく理論としてまとめ上げられ、図表や実例も豊富。デザインというよりもはや美学・哲学の書。

構想段階だった本書の草稿？

1 オブジェクト指向UIとは何か

1-1 目当ての現し

デザインの方法でよくあるのは、タスク想定に応じたUIを考えること

例えば蔵書アプリを作るとき、想定されるタスクは

本の情報を登録する

本を蔵書から検索する

しかし追加のユーザー要求を満たそうとすると、UIが冗長になる

問題は、UIがユーザーの目当てを現していないこと

問題とその解法が、利用者に対する恣意的な行動統制として一方的に決定されている

目当て＝オブジェクト

ob-（それに向かって） ject（投げる）

https://gyazo.com/652ce9c7ec4d41ea647a4ff55a356619

このようなタスク指向で作られたUIの問題は、オブジェクト指向でUIを作ることによって解決できる

ユーザーが関心のある「本」の存在を見せる

1-2 お金が先か、商品が先か

ひどいUIの例

お金を入れてからでないと選択できないタッチパネル式券売機

https://www.sociomedia.co.jp/assets/images/nakau.jpg

従来の自販機もそうだが、すでに慣れてしまっている

1-3 オブジェクト指向UI

https://www.sociomedia.co.jp/assets/images/ipad-photos.png

オブジェクトを手掛かりに操作設定されたUIのこと

画面とデータを対応づける方法論

オブジェクト指向におけるオブジェクトとは

アプリケーションが扱う情報オブジェクト、ユーザーが操作をするときの対象物

GUIとは元々オブジェクト指向

情報や機能のグラフィックがオブジェクトの観点でまとめられていることがその本質

オブジェクト指向UIの原則

オブジェクトを知覚でき直接的に働きかけられる

CUIとは対照的

オブジェクトは自身の性質と状態を体現する

ファイルの状態（選択、ドラッグ中、ダウンロード中…）がわかる

オブジェクト選択→アクション選択 の操作順序

「名詞→動詞」の操作構文

すべてのオブジェクトが互いに協調しながらUIを構成する

視覚的ゲシュタルトの法則に従い、作業空間を構成

1-4 オブジェクト指向か？ タスク指向か？

タスク思考UI

「動詞→名詞」の動詞を起点として設計された操作モデル

タスク（やること）を選び、次に引数として対象物やパラメーターを指定する

CUI

オブジェクト指向UI

対象オブジェクトを選ぶところから操作が始まる

タスク思考UIの問題

従来の自販機

商品を選んでからお金を渡すという直感に反する

モードが発生する（モーダル）

お金を入れたユーザーが途中で購入をやめるとき、「商品選択モード」から抜け出す必要がある

最近の自販機

先に商品を選べる

モードがない（モードレス）

購入の意思表示は料金の支払いというアクションに集約、コストは最小限

オブジェクト指向UIとタスク志向UIの対比

table:オブジェクト指向UIとタスク志向UIの対比

オブジェクト指向UI タスク志向UI

名詞→動詞 動詞→名詞

まずオブジェクトを選び、次にそのオブジェクトに対するアクションを選ぶ まずタスクを選び、次に引数としてオブジェクトやパラメータを指定する

ナビゲーションはオブジェクト（名詞形）を手掛かりにする ナビゲーションはタスク（動詞形）を手掛かりにする

あらゆる情報システム、特に作業者による探索や創意工夫が期待されるものについて有効 オブジェクトを選択する必要がない場合や、定型の入力手続きだけを提供する場合にのみ有効

タスク志向UIを改善する

ビデオカメラのメニュー画面

https://www.sociomedia.co.jp/assets/images/sony-1.png

「再生機能」→「イベントビュー」→日付ごとのフォルダ→録画選択→削除ボタン→「画像選択」→…

録画データの一覧を表示し、後からアクションを選べるとよい

フードデリバリーサービス

https://www.sociomedia.co.jp/assets/images/dominos-flow.png

「注文する」→「今すぐ配達」→お客様情報→「商品選択へ」→…

いきなり商品の一覧を表示すればよい

オブジェクトを前面に出す

タスクはオブジェクト同士の間にある可能性として存在

オブジェクトを使って何をするかはユーダーに委ねる

1-5 UIがタスク指向になってしまう背景

業務分析では「やること」がまとめられる

ユーザーの要求が「やること」として要件定義にまとめられていく

UIの構成も「やること」ベースに組み立てられてしまう

利用手続きをデザインしようとする

ユーザー中身設計／人間中心設計というデザイン思想

「順番通りにやるだけ」のものになりがち

タスクに必要な情報オブジェクトを定義する

決められたことを決められた手順で行うという業務アプリケーションの性質

業務自体をオブジェクト指向のシステムに合わせた創造的な方向に変えていかないといけない

デジタルトランスフォーメーション（DX）の本質

2 オブジェクト指向UIの設計プロセス

2-1 デザインプロセスのミッシングリンクをつなぐ

ISO 9241-210 人間中心設計活動プロセス

前段「利用状況の把握〜ユーザー要求の特定」

後段「デザイン試作〜デザイン評価」

両者をつなげるロジックは？

特定されたユーザー要求を実際のUIでどう扱うべきなのかのセオリー

GUIをデザインする上での構造力学的な設計理論

オブジェクト指向UIの方法論

2-2 アプリケーションの手掛かり

https://gyazo.com/e8570f3dfa201dc1649f907510990917

タスク（やること）を手掛かりにすると

タスクごとにボタンがずらりと並ぶ

やりたいこと、入口、出口をユーザーは意識しないといけなくなる

オブジェクト（対象物）を手掛かりにすると

そのままそれが画面に表示される

まずはオブジェクトを抽出する

2-3 ユーザー、タスク、オブジェクトの関係

タスク指向のUI

ユーザー → タスク1, タスク2, … → オブジェクト

タスクの数が多いため認知負荷が高く、オブジェクトが見えない

オブジェクト指向のUI

ユーザー → オブジェクト → タスク1, タスク2, …

オブジェクトが見えており、操作の手順を考える認知負荷が小さい

https://gyazo.com/ed040e192d4d7d0b304148e9ae2da6de

2-4 ソフトウェアデザインのレイヤー

UIはユーザーとオブジェクトを接続する情報空間

関心の対象をグラフィカルに表現し、それがユーザーに認知される

それをソフトウェアのアーキテクチャとして実現するのがオブジェクト指向設計（OOD）

ユーザーが持っている関心対象についての構造的概念＝メンタルモデルを模式的に再現

UIは複数のオブジェクトを構造的に表象した合成物

インターフェースはオブジェクトモデルの反映、データモデルはメンタルモデルの反映

インターフェースの表現は複数のオブジェクトを構造的に表象した合成物

オブジェクト指向のUIをソフトウェアデザインという観点から分解すると

モデル、インタラクション、プレゼンテーションの3レイヤー

https://gyazo.com/c2b1ecfcdb86ddadd743f3141947710f

モデル

オブジェクトを概念的な処理の単位として定義

システムが扱うオブジェクトの構成をモデリング

インタラクション

ユーザーとインタラクトし、入出力をモデルレイヤーにつなげる仕組み

ビューの種類やナビゲーション、CRUDやビジネスロジックに関するデザイン

プレゼンテーション

インタラクションの様子を現し、ユーザーの知覚を作る部分

グラフィックの色や形、フォーマット、レイアウト、アニメーション、サウンドなど

デザインは必ずしも抽象的なものから具象的なものへ線形的に作られるわけではない

抽象と具象を行き来しながら全体性と適合性を獲得していく

2-5 デザインの究極の目的は形である

ユーザーが道具性を見出すのは、その性質がプレゼンテーション層によって具現化されたとき

道具と目当てとの適合は、デザインがもたらしている形によってしか決まらない

よりよいGUIにはグラフィックの形を優先的に検討すべき

プレゼンテーションとメンタルモデルとの間の統合性を高める必

デザイナーのアブダクション

デザインという行為を正当に行おうとすれば、そこには、ある種の直観によって、論理的な推察を経ずに直接最終の形に到達する術が必要

制作の非プロセス性

一気に「形」に到達する

一貫して作用する「原理」を備える

ユーザーが自らを合わせることができるデザイン

道具の抽象性

りんご皮むき機 vs 果物ナイフ

モーダル vs モードレス

2-6 オブジェクト指向UI設計の基本ステップ

メインオブジェクトの一覧を早い段階で見せ、操作イディオムを推測させる

オブジェクト選択→アクション選択という操作構文をできるだけ踏襲

1. オブジェクトの抽出（モデルレイヤー）

ユーザーの操作対象となるオブジェクトを定義

クラス定義やエンティティ定義と同じ作業

業務の内容をよく把握している必要

2. ビューとナビゲーションの検討（インタラクションレイヤー）

ウィンドウ、ページ、ペイン、リストなどのこと

大きく分けて以下の二つ

コレクション

ひとつのビューの中に同種のオブジェクトを複数並べて表示するもの

一覧画面

シングル

ひとつのビューでオブジェクトひとつ分を表示するもの

詳細画面

3. レイアウトパターンの適用（プレゼンテーションレイヤー）

画面上のレイアウトとして配置

デスクトップ vs モバイル

3 オブジェクト指向UI設計の実践

3-1 オブジェクト指向UIの設計ステップ

モデル：オブジェクトの抽出

インタラクション：ビューとナビゲーションの検討

プレゼンテーション：レイアウトパターンの適用

3-2 本章でデザインするものの全体像

モデル：

オブジェクト「生徒」

プロパティ：氏名、成績

アクション：印刷する

インタラクション：

コレクション「生徒」

→ シングル「生徒」

プレゼンテーション

3-3 ステップ1. オブジェクトの抽出

名詞を抽出する

ユーザーの関心の対象となる概念は何か

「名詞」とそれらの関係を抽出する

UMLのクラス図のイメージ

「名詞」を汎化し、粒度を揃える

カテゴリー化

「名詞」の関係性をつなげ、オブジェクトを特定する

ネットワーク状につなげる

オブジェクトの中で「メインオブジェクト」になるものを特定する

主要なものとそうでないものに分け、まとまりを作る

メインオブジェクトの多重性を特定する

* をつける

https://www.sociomedia.co.jp/assets/images/email-objects-1.png

メインオブジェクトに付随するオブジェクトをプロパティとする

https://gyazo.com/ec75ea210977fa4b238b2788cf02e705

タスクからアクションを見つける

https://gyazo.com/7daff92f12e46d96701363991de5516c

3-4 ステップ2. ビューとナビゲーションの検討

基本のビュー形式

コレクションビュー

複数のオブジェクトの集合

眺める（一覧）

シングルビュー

単数のオブジェクト

よく見る（詳細）

メインオブジェクトに「コレクション」と「シングル」のビューを与える

呼び出しは矢印で表す

コレクションビューとシングルビューの呼び出し関係を検討する

組と生徒

https://www.sociomedia.co.jp/assets/images/email-objects-2.png

https://www.sociomedia.co.jp/assets/images/email-views-1.png

メインオブジェクトの中からルートナビゲーション項目を選定する

思考の起点となるオブジェクト

3-5 ステップ3. レイアウトパターンの適用

経験則として「良いパターン」がある

ルートナビゲーションの配置パターン

ビューの配置パターン

メインオブジェクトどうしの参照関係を踏まえて配置パターンを適用する

コレクションビューの表示形式のパターン

コレクションの性質や用途に合わせて表示形式を決定する

コレクションのフィルタリングのパターン

シングルビューの表示形式のパターン

シングルビューの性質や用途に合わせて表示形式を決定する

アクションの性質や用途に合わせて表示形式を決定する

Create（作成）アクションのパターン

Delete（削除）アクションのパターン

Update（更新）アクションのパターン

ビジュアルデザイン

https://www.sociomedia.co.jp/assets/images/email-desktop.png

https://www.sociomedia.co.jp/assets/images/email-mobile.png

3-6 タスクをどう扱うか

タスクの特徴

粒度がさまざま

増える

変わる

やり終えないと分からない

タスクはどこへ行くのか？

コンテンツに反映される

表示形式に反映される

アクションに反映される

初期値に反映される

テンプレートに反映される

フィルタリンググループに反映される

4 ワークアウト：基礎編

進め方

レベル1 メモアプリケーション

レベル2 社員名簿アプリケーション

レベル3 イベント店舗管理アプリケーション

レベル4 会議室予約アプリケーション

レベル5 家族で遊べる場所を探すアプリケーション

レベル6 商品管理アプリケーション

レベル7 商品管理アプリケーション

レベル8 商品管理アプリケーション

レベル9 商品管理アプリケーション

5 ワークアウト：応用編

進め方

レベル10 スマートフォン用の営業支援アプリケーション

レベル11 イベント管理アプリケーション

レベル12 保険契約の顧客管理アプリケーション

レベル13 アセット管理アプリケーション

レベル14 サイト管理アプリケーション

レベル15 出張申請・精算アプリケーション

レベル16 契約管理アプリケーション

レベル17 通貨換算アプリケーション

レベル18 販売実績照会アプリケーション

6 オブジェクト指向UIのフィロソフィー

6-1 オブジェクトの原義

6-2 オブジェクト指向

クラスとインスタンス

イデア論

6-3 GUI

マン − マシン インターフェースからユーザーインターフェースへ　　インターフェースはユーザーとオブジェクトを接着する

GUI

https://upload.wikimedia.org/wikipedia/commons/6/6b/Gem_11_Desktop.png

グラフカルユーザインタフェース

オブジェクトを選択して、アクションを実行

名詞 動詞

CUI

https://sxi.io/wp-content/uploads/2019/06/Hello-World-Bash-Shell-Script-Program.jpg

コンソールユーザインタフェース/コマンドラインユーザインタフェース

動詞 名詞

TUI

https://i.pinimg.com/originals/f8/b1/e4/f8b1e4bf7e1181f5bd0798366a685562.png

テキストユーザインタフェース

ちょっとリッチだが、本質的にはCUI

6-4 モードレス

モーダル

モーダルダイアログ

https://jp.infragistics.com/media/443966/aspnet-interactions-dialog-window-modal-or-modeless-s.png

6-5 オブジェクト指向UIについての文献

（概要）

オブジェクト指向ユーザーインターフェース（OOUI）とは、オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて、画面数が減って作業効率が高まり、また開発効率や拡張性も向上する、いわば「銀の弾丸」的な効果を持つ。ブログや雑誌記事などで大きな反響を得たこの設計手法について、前半部では理論やプロセスを詳説。そして後半部の「ワークアウト（実践演習）」では18の課題に読者がチャレンジ。実際に考え、手を動かし、試行錯誤をすることにより、OOUIの設計手法を体得できる。

（こんな方におすすめ）

・Web／モバイルアプリケーション開発者

・ユーザーインターフェースデザイナー

・フロントエンドエンジニア

（目次）

1 オブジェクト指向UIとは何か

1-1 目当ての現し

1-2 お金が先か、商品が先か

1-3 オブジェクト指向UI

1-4 オブジェクト指向か？ タスク指向か？

1-5 UIがタスク指向になってしまう背景

2 オブジェクト指向UIの設計プロセス

2-1 デザインプロセスのミッシングリンクをつなぐ

2-2 アプリケーションの手掛かり

2-3 ユーザー、タスク、オブジェクトの関係

2-4 ソフトウェアデザインのレイヤー

2-5 デザインの究極の目的は形である

2-6 オブジェクト指向UI設計の基本ステップ

3 オブジェクト指向UI設計の実践

3-1 オブジェクト指向UIの設計ステップ

3-2 本章でデザインするものの全体像

3-3 ステップ1. オブジェクトの抽出

3-4 ステップ2. ビューとナビゲーションの検討

3-5 ステップ3. レイアウトパターンの適用

3-6 タスクをどう扱うか

4 ワークアウト：基礎編

進め方

レベル1 メモアプリケーション

レベル2 社員名簿アプリケーション

レベル3 イベント店舗管理アプリケーション

レベル4 会議室予約アプリケーション

レベル5 家族で遊べる場所を探すアプリケーション

レベル6 商品管理アプリケーション

レベル7 商品管理アプリケーション

レベル8 商品管理アプリケーション

レベル9 商品管理アプリケーション

5 ワークアウト：応用編

進め方

レベル10 スマートフォン用の営業支援アプリケーション

レベル11 イベント管理アプリケーション

レベル12 保険契約の顧客管理アプリケーション

レベル13 アセット管理アプリケーション

レベル14 サイト管理アプリケーション

レベル15 出張申請・精算アプリケーション

レベル16 契約管理アプリケーション

レベル17 通貨換算アプリケーション

レベル18 販売実績照会アプリケーション

6 オブジェクト指向UIのフィロソフィー

6-1 オブジェクトの原義

6-2 オブジェクト指向

6-3 GUI

6-4 モードレス

6-5 オブジェクト指向UIについての文献

出版社からのコメント

オブジェクト指向ユーザーインターフェース(OOUI)とは、オブジェクトを起点としてUIを設計すること。タスクを起点としたUIに比べて、操作性と開発効率が劇的に向上します。その理論とプロセス、実践法を詳説し、さらに手を動かして身につける18の実践演習も用意しました。

内容（「BOOK」データベースより）

銀の弾丸、OOUI。タスクからオブジェクトへの転回による、操作性と開発効率の劇的な向上。手を動かして身につける18の実践演習付き。

著者について

■著者略歴

ソシオメディア株式会社

デジタルプロダクトに特化したデザインコンサルティング会社。2001年の創業以来、インタラクションデザイン、ユーザビリティエンジニアリング、デザインマネジメントなどの分野で先端的な実績を積み重ねるとともに、書籍、雑誌記事、セミナー、イベントなどで活発な情報発信を行い、業界をリードし続けている。近年はOOUIのトレーニングサービスが好評。

藤井 幸多

ソシオメディア株式会社ユーザーインターフェースデザイナー。各種ビジネスアプリケーションをはじめさまざまなアプリケーションのデザインコンサルティングを経験。UI設計、ユーザビリティテスト、デザインガイドライン策定、デザイン評価、OOUI メソッドとトレーニングプログラムの開発/実施などを通して、デザイン組織への支援を行う。

Twitter:@ atochotto

■監修者略歴

上野 学

デザインコンサルタント/デザイナー。各種ビジネスアプリケーション、ウェブ/モバイル/デスクトップアプリケーション、その他の様々なインタラクティブメディアのヒューマンインターフェース設計およびユーザビリティ評価に従事。ソシオメディアにおいてデザインメソッド開発を担う。執筆、講演など多数。

Twitter:@manabuueno

著者略歴 (「BOOK著者紹介情報」より)

藤井/幸多

ソシオメディア株式会社ユーザーインターフェースデザイナー。各種ビジネスアプリケーションをはじめさまざまなアプリケーションのデザインコンサルティングを経験。UI設計、ユーザビリティテスト、デザインガイドライン策定、デザイン評価、OOUIのメソッドとトレーニングプログラムの開発/実施などを通して、デザイン組織への支援を行う

上野/学

デザインコンサルタント/デザイナー。各種ビジネスアプリケーション、ウェブ/モバイル/デスクトップアプリケーション、その他のさまざまなインタラクティブメディアのヒューマンインターフェース設計およびユーザビリティ評価に従事。ソシオメディアにおいてデザインメソッド開発を担う。執筆、講演など多数(本データはこの書籍が刊行された当時に掲載されていたものです)